<template>
  <div class="jian20">
    <div class="content">
      <div class="name">歼-20</div>
      <div class="title">结构简介</div>
      <img
        class="plan"
        src="https://p5.ssl.qhimg.com/t01e62d0fd95e3df1cf.png"
      />

      <div class="width">翼展：13米</div>
      <div class="height">机长：21米</div>

      <div class="area">
        翼面积：78平方米

        <div class="line"></div>
      </div>

      <div class="enter">
        DSI进气道

        <div class="line"></div>
      </div>
    </div>

    <div class="text">
      <div class="left">
        <div class="title">
          <div></div>
          发展沿革
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。整个首飞过程在歼-10S战斗教练机陪伴下完成
            。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            2016年10月28日，首次发布“空军试飞员将驾歼-20飞机亮相中国航展”后，还陆续发布了“歼-20战机列装空军作战部队”“空军歼-20战机首次开展海上方向实战化训练”等。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            2018年11月11日，第十二届中国航展在珠海迎来“高光时刻”：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。
          </div>
        </div>
      </div>

      <div class="left">
        <div class="title">
          <div></div>
          武器配备
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            歼20使用的远程空对空导弹是PL-21导弹，也称霹雳-21型导弹，和俄罗斯的R77和美国的AIM-120相当，都是带有主动雷达导引头的。PL-21导弹是我国自主研制远程空对空导弹，专为空军的第5代战机设计，可用于狙杀敌方预警机。就仅此这一点就已经超越了世界上除俄国和美国的其他军事强国，大大提高了我国空中防御能力。
          </div>
        </div>

        <div class="bullt">
          <img src="https://p1.ssl.qhimg.com/t01e21f494791fba00a.png" />

          <div class="area">
            PL-21导弹

            <div class="line"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="text">
      <div class="left">
        <div class="title">
          <div></div>
          总体评价
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好地肩负起维护国家主权、安全和领土完整的神圣使命。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            歼-20是中国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发中国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼-20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，建立了具有中国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，中国在战斗机的机械化、信息化、智能化发展征程上不断前行。
          </div>
        </div>
      </div>

      <div class="left">
        <img
          class="plan1"
          src="https://p0.ssl.qhimg.com/t017c5b89099fb04020.png"
        />

        <img
          class="plan2"
          src="https://p5.ssl.qhimg.com/t018a1640b0af7ea1f9.png"
        />
      </div>
    </div>

    <div class="button">
      <RouterLink to="/jian20video" class="link"
        >8k感受歼20震撼空中画面</RouterLink
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
  .jian20 {
    background-image: url(../assets/WechatIMG165.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    overflow: auto;

    .content {
      padding-left: 3vw;
      padding-top: 3vw;
      width: 100%;
      position: relative;
      .name {
        font-size: 3vw;
      }
      .title {
        font-size: 2vw;
      }
      .plan {
        width: 65vw;
        transform: rotateZ(-20deg);
        margin-left: 12vw;
        position: relative;
        top: -3vw;
      }

      .width {
        position: absolute;
        left: 65vw;
        width: 33vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 15vw;
        transform: rotateZ(70deg);
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent yellow transparent transparent;
        }
        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }

      .height {
        position: absolute;
        left: 12vw;
        width: 56vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 7vw;
        transform: rotateZ(-20deg);
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent yellow transparent transparent;
        }
        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }

      .area {
        position: absolute;
        left: 65vw;
        width: 30vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 44vw;

        .line {
          width: 18vw;
          height: 2px;
          background: yellow;
          position: absolute;
          left: -18vw;
          bottom: -2px;
          transform-origin: right bottom;
          transform: rotateZ(80deg);
        }
      }

      .enter {
        position: absolute;
        left: 40vw;
        width: 22vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 45vw;

        .line {
          width: 15vw;
          height: 2px;
          background: yellow;
          position: absolute;
          left: -15vw;
          bottom: -2px;
          transform-origin: right bottom;
          transform: rotateZ(80deg);
        }
      }
    }

    .text {
      width: 100%;
      display: flex;
      margin-top: 3vw;
      padding-bottom: 5vw;
      overflow: hidden;
      .left {
        width: 50%;
        padding-left: 4vw;
        padding-right: 4vw;
        .title {
          display: flex;
          align-items: center;
          height: 3.5vw;
          font-size: 2.5vw;
          div {
            width: 2vw;
            height: 3.5vw;
            margin-right: 1vw;
            border: 1px solid brown;
            background: yellow;
          }
        }
        .item {
          display: flex;
          margin-top: 1vw;
          .dot {
            width: 1vw;
            height: 1vw;
            background: yellow;
            margin-right: 1vw;
            margin-left: 0.5vw;
            transform: rotateZ(45deg);
            position: relative;
            top: 0.5vw;
          }
          .item-text {
            flex: 1;
            font-size: 1.5vw;
          }
        }

        .bullt {
          position: relative;

          img {
            width: 20vw;
            margin-left: 5vw;
            margin-top: 3vw;
            transform: rotateZ(-70deg);
          }

          .area {
            position: absolute;
            left: 12vw;
            width: 20vw;
            text-align: center;
            font-size: 3vw;
            border-bottom: 2px solid yellow;
            top: 19vw;

            .line {
              width: 10vw;
              height: 2px;
              background: yellow;
              position: absolute;
              left: -10vw;
              bottom: -2px;
              transform-origin: right bottom;
              transform: rotateZ(80deg);
            }
          }
        }

        .plan1 {
          width: 40vw;
        }
        .plan2 {
          width: 30vw;
        }
      }
    }

    .button {
      display: flex;
      justify-content: center;
      margin: 5vw;

      .link {
        font-size: 3vw;
      }
    }
  }
</style>
